import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 300
    height: 480
    title: qsTr("Rect")

    Rectangle {
        id: rect1
        x:12;y:12
        width: 76;height: 96
        color: "lightsteelblue"
    }
    Rectangle {
        id: rect2
        x:12+100;y:12
        width: 76;height: 96
        //边框颜色
        border.color: "lightsteelblue"
        //边框宽度
        border.width: 4
        //添加圆角
        radius: 20
    }
    Rectangle {
        id: rect3
        x:12+100+100;y:12
        width: 76;height: 96
        //添加渐变色
        gradient: Gradient {
            GradientStop{position: 0.0;color: "lightsteelblue"}
            GradientStop{position: 1.0;color: "slategrey"}
        }
        border.color: "lightsteelblue"
        border.width: 4
        radius: 20
    }
    Rectangle {
        id: rect4
        x:12+100+100;y:12+100
        width: 76;height: 96
        //添加渐变色
        gradient: Gradient {
            //position 标记y轴上的位置（0=顶部，1=底部）
            GradientStop{position: 0.0;color: "green"}
            GradientStop{position: 1.0;color: "red"}
        }
        border.color: "lightsteelblue"
        border.width: 4
        radius: 20
    }
    Rectangle {
        id: rect5
        x:12+100;y:12+100
        width: 76;height: 96
        //边框颜色
        border.color: "lightsteelblue"
        //边框宽度
        border.width: 4
        //添加圆角
        radius: 20
        //可以使用JavaScript创建随机颜色
        color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
    }
}
